<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Ace Admin Template - Documentation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
	
	<link rel="stylesheet" href="../assets/css/font-awesome.min.css" />
	<!--[if IE 7]>
	  <link rel="stylesheet" href="../assets/css/font-awesome-ie7.min.css" />
	<![endif]-->
		
    <link href="assets/css/docs.css" rel="stylesheet">
    <link href="../assets/css/prettify.css" rel="stylesheet">

	<link href="../assets/css/ace.min.css" rel="stylesheet">
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="assets/js/html5shiv.js"></script>
    <![endif]-->
	
	<style>
	body {
	 background-color:#FFF;
	}
	body > .navbar .brand {
	 float:left;
	 color:#FFF;
	 padding:0;
	 line-height:34px;
	 font-size:18px;
	 padding-bottom:2px;
	 margin-left:24px;
	}
	.navbar-inverse .navbar-inner {
	 min-height:0;
	}
	.bs-docs-sidenav {
	 margin-top:16px;
	}
	
	.bs-docs-sidenav > li.active:after {
	 display:none;
	}
	
	.bs-docs-sidenav > li > a {
	 border-radius:0 !important;
	}
	.bs-docs-sidenav > li > a:hover:before {
	 top:1px;
	}
	
	.bs-docs-sidenav > .active > a {
	 padding:0 8px;
	 border:1px solid #E5E5E5;
	}
	.bs-docs-sidenav > li > a > [class*="icon-"] {
	 position:absolute;
	 right:10px;
	 top:6px;
	 display:none;
	}
	
	</style>
  </head>

  <body data-spy="scroll">

    <!-- Navbar
    ================================================== -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand pull-left" href="./index.html">Ace Admin Docs</a>
        </div>
      </div>
    </div>

<!-- Subhead
================================================== -->


  <div class="container">

    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav ">
          <li><a href="#introduction">Introduction</a></li>
          <li><a href="#basic">Basics</a></li>
          <li><a href="#elements">Elements</a></li>
		  <li><a href="#pages">Pages</a></li>
          <li><a href="#forms">Forms</a></li>
          <li><a href="#plugins">Plugins</a></li>
        </ul>
      </div>
      <div class="span9">



        <!-- Typography
        ================================================== -->
        <section id="introduction">
          <h1 class="blue"><i class="icon-leaf green"></i> Introduction</h1>
		  <hr />

          <p>
			First of all I would like to thank you for purchasing Ace admin template.
			I hope you like it and find it easy to work with.
		  </p>
		  <p>
			Note that this is the initial release and there may be bugs and missing features which will be targeted in next updates.
		  </p>
		  <p>
			Also this documentation is brief and may be lacking in some parts. If you think more explanations or examples are needed, just let me know.
		  </p>
		  <p>
			Please send your questions, comments or bug reports to me at <a href="mailto:ace.support@live.com">ace.support@live.com</a> and I will do my best to reply as soon as possible.
		  </p>
		  
		  <div class="hr hr-dotted hr12"></div>

		  <p>
			Best Wishes
			<br />
			Mohsen Hosseini
		  </p>
		  
		  <div class="hr hr-double hr32"></div>
		  
		  <h2 id="headings"><i class="icon-magic purple"></i> Features</h2>
		  <p>
			Ace is a lightweight and feature rich admin template which is clean and easy to use.
			<br />
			Current release comes with the following features:
		  </p>
		  <ul class="unstyled">
            <li> <i class="icon-hand-right"></i> 4 different theme colors</li>
			<li> <i class="icon-hand-right"></i> Responsive design based on Bootstrap 2.3.1</li>
			<li><i class="icon-hand-right"></i> Custom elements and plugins including:
				<ul class="unstyled margin">
					<li> <i class="icon-ok green"></i> Pure CSS3 checkbox, radio and On/Off switch elements (not available in IE8)</li>
					<li> <i class="icon-ok green"></i> File input control</li>
					<li> <i class="icon-ok green"></i> Simple color picker</li>
					<li> <i class="icon-ok green"></i> Customizable widgets in different colors and styles</li>
				</ul>
			</li>
			<li> <i class="icon-hand-right"></i> Bootstrap, jQuery UI and third party plugins and elements including:
				<ul class="unstyled margin">
					<li> <i class="icon-ok green"></i> Charts</li>
					<li> <i class="icon-ok green"></i> Dynamic tables</li>
					
					<li> <i class="icon-ok green"></i> Slider</li>
					<li> <i class="icon-ok green"></i> Spinner</li>
					<li> <i class="icon-ok green"></i> Wizard</li>
					<li> <i class="icon-ok green"></i> Form validation</li>
					
					<li> <i class="icon-ok green"></i> Color picker</li>
					<li> <i class="icon-ok green"></i> Date picker</li>
					<li> <i class="icon-ok green"></i> DateRange picker</li>
					<li> <i class="icon-ok green"></i> Time picker</li>
					
					<li> <i class="icon-ok green"></i> Colorbox for gallery</li>
					
					<li> <i class="icon-ok green"></i> Full calendar</li>
					
					<li> <i class="icon-ok green"></i> Chosen selects</li>
					<li> <i class="icon-ok green"></i> Textarea input limiter</li>
					<li> <i class="icon-ok green"></i> Textarea auto resize</li>
					<li> <i class="icon-ok green"></i> Masked input</li>
					
					<li> <i class="icon-ok green"></i> Growl like notifications</li>
					<li> <i class="icon-ok green"></i> Imageless spinner</li>
				</ul>
			</li>
          </ul>
		  
		  <div class="well">
			<span class="label label-info arrowed-right">Note</span> Stylings of most third party elements have been modified to replace external images and icons with CSS and FontAwesome.
		 
		    <div class="space-6"></div>
		    <p>
			This has benefits such as better view on Retina displays as almost no pixel graphics are used  and it also means fewer network file requests resulting in faster page load time.
		    </p>
		  </div>
		  
		  
		  
		  <h2 id="headings">Planned Features</h2>
		  <p>
			The following have been planned and will be included gradually:
		  </p>
		  <ul class="unstyled">
			<li> <i class="icon-hand-right"></i>  New features & elements such as :
				<ul class="unstyled margin">
					<li> <i class="icon-ok green"></i> Wysiwyg editor </li>
					<li> <i class="icon-ok green"></i> Treeview </li>
					<li> <i class="icon-ok green"></i> Search results </li>
					<li> <i class="icon-ok green"></i> Tables with details </li>
					<li> <i class="icon-ok green"></i> FAQ page </li>
					<li> <i class="icon-ok green"></i> User profile </li>
					<li> <i class="icon-ok green"></i> Inline editable data </li>
					<li> <i class="icon-ok green"></i> File upload and management </li>
					<li> <i class="icon-ok green"></i> Email template </li>
				</ul>
			</li>
			
			<li> <i class="icon-hand-right"></i> More gallery, table, calendar, tabbed view and form styles </li>
			<li> <i class="icon-hand-right"></i> More theme colors and customization </li>
			<li> <i class="icon-hand-right"></i> Cookie support for saving client-side customizations </li>
			<li> <i class="icon-hand-right"></i> RTL support </li>
			<li> <i class="icon-hand-right"></i> Adding LESS files as well as Javascript client-side template files such as Mustache.
		  </ul>
		  If you also have a recommendation or feature request, please let me know.
		  
		  <div class="hr dotted"></div>
		  <p>
			Now let's get to basics.
		  </p>
      </section>

	  
	  <div class="hr hr-double hr32"></div>

        <!-- Basics
        ================================================== -->
        <section id="basic">
          <div class="page-header">
            <h1><i class="icon-coffee green"></i> Basics</h1>
          </div>

          <h2><i class="icon-file brown"></i> Files</h2>
		  <div class="well well-small">
			<span class="label label-info arrowed-right">Note</span> Currently Ace only consists of html files. In later releases there will be template-based files both for client-side and server-side scripting languages.
		  </div>
		  
		  <p>
			HTML files are located on the main directory as you can see.
			<br />
			<b><i class="icon-folder-open-alt"></i> assets</b> folder contains CSS, JS, avatars, gallery images and some third party styling images that actually are not used as mentioned above (except for images related to the ColorPicker plugin) 
			<br />
			<b><i class="icon-folder-open-alt"></i> docs</b> folder which contains this documentation page.
		  </p>
		  
		  <p>
			Ace CSS files are:
			<ul class="unstyled">
				<li> <i class="icon-file"></i> ace.min.css </li>
				<li> <i class="icon-file"></i> ace-responsive.min.css </li>
				<li> <i class="icon-file"></i> ace-skins.min.css </li>
				<li> <i class="icon-file"></i> ace-ie.min.css (for ie8) </li>
			</ul>
			The uncompressed css files are put in the "uncompressed" folder.
		  </p>
		  
		  <p>
			Ace JS files are:
			<ul class="unstyled">
				<li> <i class="icon-file"></i> ace.min.js </li>
				<li> <i class="icon-file"></i> ace-elemenets.min.js </li>
			</ul>
			Again the uncompressed js files are put in the uncompressed folder.
		  </p>
		  
		  <hr />
		  
		  <p>Ace HTML files are the following:</p>
		  <ol>
		    <li> Empty (empty.html) </li>
			<li> Blank HTML Page (blank.html) </li>
			<li> Buttons & Icons (buttons.html) </li>
			<li> Full Calendar (calendar.html) </li>
			<li> UI Elements (elements.html) </li>
			<li> Error 404 (error-404.html) </li>
			<li> Error 500 (error-500.html) </li>
			<li> Form Elements (form-elements.html) </li>
			<li> Form Wizard (form-wizard.html) </li>
			<li> Gallery (gallery.html) </li>
			<li> Grid (grid.html) </li>
			<li> Dashboard (index.html) </li>
			<li> Invoice (invoice.html) </li>
			<li> Login, Registration and Password Retrieval Page (login.html) </li>
			<li> Pricing Boxes (pricing.html) </li>
			<li> Tables (tables.html) </li>
			<li> Typography (typography.html) </li>
			<li> Widget Boxes (widgets.html) </li>
		  </ol>
		  
		  <hr class="bs-docs-separator">
		  <h2 class="smaller lighter"><i class="icon-eye-open green"></i> Theme Colors</h2>
		  Currently there are 3 different theme colors for Ace, other than the default one.
		  <br />
		  You can choose each one from the Settings button on right side of each page just below the search box.
		  <br />
		  However when you change a setting no data will be saved and by refreshing the page you will see the default theme again.
		  <br />
		  In your application you can set the theme on body tag in a static way:
<pre class="prettyprint linenums">
&lt;body class="skin-1"&gt;
&lt;body class="skin-2"&gt;
&lt;body class="skin-3"&gt;
</pre>
or dynamically in your server side script:
		<div class="bs-docs-example" data-text="Just an Example">
			<pre class="prettyprint linenums">&lt;body class="&lt;?php echo $_COOKIE['skin']; ?&gt;"&gt;</pre>
		</div>
		  
		  <p>
		  Also you may notice when you choose a skin, the top user menu buttons change their color.
		  <br />
		  This is not dependent on the skin but the color class of the buttons are changed via Javascript.
		  <br />
		  You can hardcode them inside your application to any desired color as specified in next section.
		  </p>
		  
		  
			
		  <hr class="bs-docs-separator">
		  
		  <h2 class="smaller lighter"><i class="icon-file blue"></i> The Empty File</h2>
		  <p>Let's continue with general structure of <i class="icon-file"></i> <b>empty.html</b> file as an example.</p>
		  The top navigation is as followes:
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-inverse"&gt;
  &lt;div class="navbar-inner"&gt;
   &lt;div class="container-fluid"&gt;

     &lt;a class="brand" href="#"> Logo goes here &lt;/a&gt;

     &lt;ul class="nav ace-nav pull-right"&gt;
       The top user menu goes here
     &lt;/ul&gt;

   &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

	<p>
	Use the top user notifications menu <code>.ace-nav</code> like a normal menu:
<pre class="prettyprint linenums">
&lt;li class="green"&gt;
   &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
      &lt;i class="icon-tasks"&gt;&lt;/i&gt;
      &lt;span class="badge"&gt;4&lt;/span&gt;
   &lt;/a&gt;
	
   &lt;ul class="pull-right dropdown-navbar dropdown-menu"&gt;
       &lt;!-- DROP DOWN MENU ITEMS HERE --&gt;
   &lt;/ul&gt;
&lt;/li&gt;
</pre>
This <code>li</code> element can have any of the following classes:
<br />
<code>.grey</code> <code>.purple</code> <code>.green</code> <code>.light-blue</code> <code>.red</code> <code>.light-green</code> <code>.light-purple</code> <code>.light-orange</code> <code>.dark</code> <code>.light-blue2</code> <code>.white-pink</code>
<br />
<code>.no-border</code> <code>.margin-1</code> <code>.margin-2</code>

	</p>
		  
	<p>
	The final element also has the class <code>.user-profile</code>
	<br />
	Please check the html source for this item and include the classes as used for better responsiveness.
	</p>
	
	<hr />
	
	<p>
	The <code>#main-container</code> element contains everything else (sidebar and content) and starts with :
<pre class="prettyprint linenums">
&lt;a href="#" id="menu-toggler"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
</pre>
	which is the button to toggle sidebar menu in mobile and tablet devices.
	</p>
	
	<p>
	Next comes the <code>#sidebar</code> element:
<pre class="prettyprint linenums">
&lt;div id="sidebar"&gt;
&lt;/div&gt;
</pre>
	It begins with shortcut buttons on top which you can delete or replace with search box element <code>#nav-search</code>
	<br />
	Next is the menu itself and then the sidebar collapse button, which helps minimize the menu, for more content space.
	<br />
	<br />
	<span class="label label-info arrowed-right">Note</span> When you minimize the menu, nothing is saved and when you refresh the page the full menu is displayed again.
	To save the state in your application you may use cookies (support coming in next updates) or in your server side application:
	<div class="bs-docs-example" data-text="Just an Example">
<pre class="prettyprint linenums">
&lt;div id="sidebar" class="&lt;?php if(isset($_COOKIE['menu_state'])) 
	                               AND $_COOKIE['menu_state'] == 'min') 
		              echo 'menu-min'; ?&gt;"&gt;
&lt;/div&gt;
</pre>
	</div>
	
	</p>

	<p>
	Then is <code>#main-content</code> which begins with optional <code>#breadcrumbs</code> which has breadcrumbs and the <code>#nav-search</code>
	followed by <code>"#page-content"</code> element containing the page contents.
	</p>
	
	<p>
		After that it's the optional settings container <code>#ace-settings-container</code>.
	</p>
	
	<div class="hr hr-dotted hr12"></div>
	
	<p>
		That was a brief overview of the page structure and you can empty.html and blank.html for more details.
	</p>
	
			  <hr class="bs-docs-separator">
	
	  

          <h2>Some of the classes</h2>
		  <p>
			There are a few basic classes which have been used:
			<br />
			<h4 class="pink">Text colors:</h4>
			<code class="red">.red</code>
			<code class="light-red">.light-red</code>
			<code class="blue">.blue</code>
			<code class="light-blue">.light-blue</code>
			<code class="green">.green</code>
			<code class="light-green">.light-green</code>
			<code class="orange">.orange</code>
			<code class="purple">.purple</code>
			<code class="pink">.pink</code>
			<code class="pink2">.pink2</code>
			<code class="brown">.brown</code>
			<code class="grey">.grey</code>
			<code class="dark">.dark</code>
			<code class="white">.white</code>
			
			<br />
			<br />
			<h4 class="purple">A little text sizing:</h4>
			<code class="bigger-110">.bigger-110</code>
			<code class="bigger-125">.bigger-125</code>
			<code class="bigger-150">.bigger-150</code>
			<code class="bigger-200">.bigger-200</code>
			<br />
			<code class="smaller-90">.smaller-90</code>
			<code class="smaller-75">.smaller-75</code>
			<code class="smaller-50">.smaller-50</code>
			
			<br />
			<br />
			<h3 class="header smaller lighter blue"><code>.header</code> class for little headers like this</h3> which comes with same above color variations:
			<div class="bs-docs-example" data-text="Header Example">
				<pre class="prettyprint linenums">&lt;h3 class="header purple lighter"&gt;A little bit of title&lt;/h3&gt;</pre>
			</div>
			
			
			<br />
			<br />
			
			<p>
			All headings have hte following extra classes : <code>.smaller</code> , <code>.bigger</code> , <code>.lighter</code> , <code>.bolder</code>
			</p>
			<div class="bs-docs-example" data-text="Heading Example">
				<pre class="prettyprint linenums">&lt;h4 class="bigger lighter"&gt; some text... &lt;/h4&gt;</pre>
			</div>
			
			<br />
			<br />
			
			<h4 class="grey">A few spacing elements to add some space:</h4>
				<code>.space</code>
				<code>.space-18</code>
				<code>.space-24</code>
				<code>.space-36</code>
				<code>.space-9</code>
				<code>.space-6</code>
				<code>.space-3</code>
		
				<div class="bs-docs-example" data-text="Spacing Example">
					<pre class="prettyprint linenums">&lt;div class="space"&gt;&lt;/div&gt;</pre>
				</div>
			
				There is also space on smaller resolutions (invisible on larger screens)
				<code>.vspace</code>
				<code>.vspace-18</code>
				<code>.vspace-24</code>
				<code>.vspace-36</code>
				<code>.vspace-9</code>
				<code>.vspace-6</code>
				<code>.vspace-3</code>
				
				<div class="bs-docs-example" data-text="Small Device Spacing">
<pre class="prettyprint linenums">
    &lt;div class="span4"&gt;&lt;/div&gt;
    &lt;div class="vspace-9"&gt;&lt;/div&gt;
    &lt;div class="span8"&gt;&lt;/div&gt;
</pre>
			When stacked on top of each other there will be some space between <code>.span</code> elements on small devices.
				</div>
			
			
			

			
			<p>
			Line spacings like <code>hr</code> element with following classes: <br />
			<code>.hr</code> <code>.hr8</code> <code>.hr12</code> <code>.hr16</code> <code>.hr24</code>  <code>.hr32</code> 
			<br />
			<code>.hr-double</code>  <code>.hr-dotted</code> 
			</p>
			<div class="bs-docs-example" data-text="Horizontal Line Example">
				<pre class="prettyprint linenums">&lt;div class="hr hr12 hr-double hr-dotted"&gt;&lt;/div&gt;</pre>
				<div class="hr hr12 hr-double hr-dotted"></div>
			</div>
			
			
			<br />
			<p>
			Also list elements <code>ul</code> and <code>ol</code> with <code>.spaced</code> and <code>.spaced2</code> classes, can have more space between list items.
			</p>

			<br />
			<p>
			And some other classes: <br /> <code>.hidden</code>, <code>.position-relative</code>, <code>.position-absolute</code>
			<code>.center</code>, <code>.inline</code>, <code>.block</code>
			</p>

		  
      </section>

	  
	  <div class="hr hr-double hr32"></div>


        <!-- Tables
        ================================================== -->
        <section id="elements">
          <div class="page-header">
            <h1><i class="icon-desktop grey"></i> UI Elements</h1>
          </div>

          <h2>Tabs</h2>
          <p>
			Tab content <code>.tab-content</code> may have different paddings based on different needs (for examples tables in tabs with no padding):
			<br />
			<code>.no-padding</code> <code>.padding-4</code> <code>.padding-8</code> <code>.padding-24</code>
		  </p>
		  <p>
			You can also use tabs inside widget header which is shown on widgets section.
		  </p>
		  
		 
		  <h2>Progress Bar</h2>
		  There are two additional classes <code>.progress-small</code> and <code>.progress-mini</code> for smaller sized progress bars.
		  <br />
		  You may also use <code>data-percent</code> attribute to display the percentage value on center of the <code>.progress</code> element.
		  <div class="bs-docs-example" data-text="Progressbar Example">
				<pre class="prettyprint linenums">&lt;div class="progress progress-mini" data-percent="62%"&gt; &lt;div class="bar" style="width:62%"&gt;&lt;/div&gt; &lt;/div&gt;</pre>
				<div style="width:200px;">
					<div class="progress progress-small" data-percent="62%"> <div class="bar" style="width:62%"></div> </div>
				</div>
		  </div>
		  <br />
		  The are also circular progress bars (using easy pie chart) for which you can refer to the documentation or examples in html files.
		  
		  <div class="space-9"></div>
		  
		  <h2>Tooltips and Popovers</h2>
		  There are four more classes related to tooltip and popover coloring:
		  <br />
		  <code>.tooltip-error</code> <code>.tooltip-info</code> <code>.tooltip-warning</code> <code>.tooltip-success</code>
		  <br />
		  Apply these classes to the element for which you are going to invoke the tooltip function.
		  <br />
		  It applies to both popovers and tooltips.
		  <br />
		  Popovers can also be without title <code>.no-title</code>
		  <div class="bs-docs-example" data-text="Tooltip Example">
		  <pre class="prettyprint linenums">&lt;div class="tooltip-error" title="Tooltip Text!" data-placement="top"&gt;
    Show error tooltip on hover!
&lt;/div&gt;</pre>
		  </div>
		  
		  <div class="space-9"></div>

		  <h2>Dropdowns</h2>
		  Dropdown menus have some extra classes.
		  <br />
		  For different menu colors on hover and active states use: <br />
		  <code>.dropdown-default</code>
		  <code>.dropdown-info</code>
		  <code>.dropdown-purple</code>
		  <code>.dropdown-success</code>
		  <code>.dropdown-warning</code>
		  <code>.dropdown-danger</code>
		  <code>.dropdown-inverse</code>
		  <code>.dropdown-pink</code>
		  <code>.dropdown-yellow</code>
		  <code>.dropdown-grey</code>
		  <code>.dropdown-light</code>
		  <code>.dropdown-lighter</code>
		  
		  <br />
		  Use <code>.dropdown-caret</code> to show the caret.
		  <br />
		  Use <code>.dropdown-close</code> and <code>.dropdown-closer</code> to show the menu a bit closer to the invoker element.
		  
		  <div class="bs-docs-example" data-text="Dropdown Menu Example">
		  <pre class="prettyprint linenums">&lt;ul class="dropdown-menu dropdown-purple dropdown-closer dropdown-caret"&gt;
&lt;/ul&gt;</pre>
		  </div>
		  
		  
		  <h2>Buttons</h2>
		  Buttons have some additional classes:<br />
		  <code>.btn-minier</code> makes it smaller than <code>.btn-mini</code>
		  <br />
		  <code>.btn-pink</code> <code>.btn-purple</code> <code>.btn-yellow</code> <code>.btn-grey</code>
		  are for more colors.
		  <br />
		  <code>.btn-app</code> is for the large application buttons which can include badges and labels inside them.
		  <br />
		  If there is an icon on right side of a button give the icon a <code>.icon-on-right</code> classname for better spacing.
		  
		  <br />
		  <br />
		  
		  Badges and labels come with additional color classes:
		  <br />
		  <code>.badge-pink</code>
		  <code>.label-purple</code>
		  <code>.label-yellow</code>
		  <code>.label-default</code>
		  <br />
		  <code>.label-large</code> makes a label a bit larger.
		  
		  <br />
		  There are also arrows for labels which you can use like the examples:
		 <div class="bs-docs-example" data-text="Label Example">
<pre class="prettyprint linenums">
&lt;span class="label label-pink arrowed"&gt;.arrowed&lt;/span&gt;
&lt;span class="label label-yellow arrowed-in-right"&gt;.arrowed-in-right&lt;/span&gt;
&lt;span class="label label-default arrowed arrowed-right"&gt;
.arrowed .arrowed-right
&lt;/span&gt;
&lt;span class="label label-warning label-large arrowed arrowed-in-right"&gt;
.arrowed-in .arrowed-in-right
&lt;/span&gt;
</pre>



    <span class="label label-pink arrowed"> .arrowed </span>
    <span class="label label-yellow arrowed-in-right"> .arrowed-in-right </span>
    <span class="label label-default arrowed arrowed-right"> .arrowed .arrowed-right </span>
    <span class="label label-warning label-large arrowed arrowed-in-right"> .arrowed-in .arrowed-in-right </span>


		  </div>

        </section>


		<div class="hr hr-double hr32"></div>
		

        <!-- Forms
        ================================================== -->
        <section id="pages">
          <div class="page-header">
            <h1><i class="icon-copy pink"></i> Pages</h1>
          </div>

          <h2>Dashboard Elements</h2>
		  <h4 class="header">Info and Stats</h4>
		  
		  	<div class="bs-docs-example" data-text="Infobox Example">
<pre class="prettyprint linenums">
&lt;div class="infobox infobox-green"&gt;
	&lt;div class="infobox-icon"&gt;&lt;i class="icon-comments"&gt;&lt;/i&gt;&lt;/div&gt;
	&lt;div class="infobox-data"&gt;
		&lt;span class="infobox-data-number"&gt;32&lt;/span&gt;
		&lt;span class="infobox-content"&gt;comments + 2 reviews&lt;/span&gt;
	&lt;/div&gt;
	&lt;div class="stat stat-success"&gt;8%&lt;/div&gt;
&lt;/div&gt;
</pre>



    <div class="infobox infobox-green">
		<div class="infobox-icon"><i class="icon-comments"></i></div>
		<div class="infobox-data">
			<span class="infobox-data-number">32</span>
			<span class="infobox-content">comments + 2 reviews</span>
		</div>
		<div class="stat stat-success">8%</div>
    </div>
	
	<div class="infobox infobox-blue infobox-dark">
		<div class="infobox-icon"><i class="icon-comments"></i></div>
		<div class="infobox-data">
			<span class="infobox-data-number">32</span>
			<span class="infobox-content">comments + 2 reviews</span>
		</div>
		<div class="stat stat-success">8%</div>
    </div>


			</div>
			
			<p>
				it contains the following color classes:
				<ul class="inline">
					<li><code>.infobox-green</code></li>
					<li><code>.infobox-green2</code></li>
					<li><code>.infobox-purple</code></li>
					<li><code>.infobox-purple2</code></li>
					<li><code>.infobox-pink</code></li>
					<li><code>.infobox-blue</code></li>
					<li><code>.infobox-blue2</code></li>
					<li><code>.infobox-blue3</code></li>
					<li><code>.infobox-brown</code></li>
					<li><code>.infobox-wood</code></li>
					<li><code>.infobox-lightbrown</code></li>
					<li><code>.infobox-orange</code></li>
					<li><code>.infobox-orange2</code></li>
					<li><code>.infobox-grey</code></li>
					<li><code>.infobox-black</code></li>
				</ul>
			</p>
			<p>
				<code>.infobox-dark</code> makes it dark
			</p>
			<p>
				<code>.infobox-small</code> makes it smaller
			</p>
			
			<p>
				<code>.infobox-icon</code> <code>.infobox-chart</code> <code>.infobox-progress</code> are for icons and charts inside
			</p>
			
			<p>
				<code>.infobox-data-number</code> <code>.infobox-text</code> for title and <code>.infobox-content</code> for extra explanation.
			</p>
			
			<p>
				<code>.infobox-stat</code> and <code>.badge</code> for small stats and arrows.
			</p>
			
		

		  <h2>Widgets</h2>
		  		  	<div class="bs-docs-example" data-text="Default Widget Example">
<pre class="prettyprint linenums">
&lt;div class="widget-box"&gt;

 &lt;div class="widget-header"&gt;
   &lt;h5&gt;Default Widget Box&lt;/h5&gt;
   &lt;div class="widget-toolbar"&gt;
	  &lt;a data-action="settings" href="#"&gt;&lt;i class="icon-cog"&gt;&lt;/i&gt;&lt;/a&gt;
	  &lt;a data-action="reload" href="#"&gt;&lt;i class="icon-refresh"&gt;&lt;/i&gt;&lt;/a&gt;
	  &lt;a data-action="collapse" href="#"&gt;&lt;i class="icon-chevron-up"&gt;&lt;/i&gt;&lt;/a&gt;
	  &lt;a data-action="close" href="#"&gt;&lt;i class="icon-remove"&gt;&lt;/i&gt;&lt;/a&gt;
   &lt;/div&gt;
 &lt;/div&gt;&lt;!--/.widget-header --&gt;

 &lt;div class="widget-body"&gt;
  &lt;div class="widget-main"&gt;
  &lt;/div&gt;
 &lt;/div&gt;&lt;!--/.widget-body --&gt;

&lt;/div&gt;&lt;!--/.widget-box --&gt;
</pre>
			</div>
		  
		  <p>
			Widget header comes with following classes:
			<code>.widget-header-small</code> <code>.widget-header-large</code>
			<code>.widget-header-flat</code>
			<code>.header-color-blue</code> <code>.header-color-blue2</code> <code>.header-color-blue3</code>
			<code>.header-color-green</code> <code>.header-color-green2</code> <code>.header-color-green3</code>
			<code>.header-color-red</code> <code>.header-color-red2</code> <code>.header-color-red3</code>
			<code>.header-color-orange</code> <code>.header-color-purple</code> <code>.header-color-pink</code>
			<code>.header-color-dark</code> <code>.header-color-grey</code>
		  </p>
		  
		  <p>
		   <code>.widget-box</code> can come with following classes:
		   <code>.transparent</code> <code>.light-border</code> <code>.no-border</code>
		  </p>
		  
		  <p>
		   <code>.widget-main</code> can come with following paddings:
		   <code>.no-padding</code> <code>.padding-3</code> <code>.padding-5</code>
		   <code>.padding-5</code> 
		   <code>.padding-18</code>
		   <code>.padding-24</code>
		   <code>.padding-36</code>
		   <br />
		   For example when putting a table inside the widget you may want to use <code>.no-padding</code>
		  </p>
		  
		  <br />
		   <p>
			<code>.widget-toolbar</code> example:
			<div class="bs-docs-example" data-text="Widget Toolbar With Tabs">
<pre class="prettyprint linenums">

&lt;div class="widget-header header-color-pink"&gt;
   &lt;h5&gt;With Tabs&lt;/h5&gt;
   &lt;div class="widget-toolbar no-border"&gt;
	&lt;ul class="nav nav-tabs"&gt;
	  &lt;li class="active"&gt;&lt;a href="#tab1" data-toggle="tab"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
	  &lt;li&gt;&lt;a href="#tab2" data-toggle="tab"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
	  &lt;li&gt;&lt;a href="#tab3" data-toggle="tab"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
   &lt;/div&gt;
&lt;/div&gt;&lt;!-- .widget-header --&gt;

</pre>
			</div>
		   </p>
		   
		   
<br />
		   
		 <h2>Gallery</h2>
		 <p>
			Gallery items can have tags (inside <code>li</code> or <code>a</code>), captions (inside <code>a</code> or stand alone) and a toolbar.
			<div class="bs-docs-example" data-text="Sample Gallery Item">
<pre class="prettyprint linenums">
&lt;ul class="ace-thumbnails"&gt;

&lt;li&gt;
 &lt;a href="image-1.jpg" title="title" data-rel="gallery1"&gt;
  &lt;img alt="150" src="thumb-1.jpg" /&gt;
  &lt;div class="tags"&gt;
	&lt;span class="label label-info"&gt;breakfast&lt;/span&gt;
  &lt;/div&gt;
 &lt;/a&gt;
 &lt;div class="tools"&gt;
	&lt;a href="#"&gt;&lt;i class="icon-link"&gt;&lt;/i&gt;&lt;/a&gt;
 &lt;/div&gt;
&lt;/li&gt;
.
.
.

&lt;/ul&gt;
</pre>
			<span class="label label-important arrowed-right">Note</span> More gallery styles will be included in next updates.
			
			</div>

		 </p>

<br />
		 
		 <h2>Pricing Tables</h2>
		 <p> Pricing Tables come in two sizes, small and large and are based on widget boxes:
		 </p>
		 <div class="bs-docs-example" data-text="Large Pricing Box">
<pre class="prettyprint linenums">
&lt;div class="widget-box <b class="bigger-125">pricing-box</b>"&gt;
&lt;/div&gt;
</pre>
		 </div>
		 
		 <div class="bs-docs-example" data-text="Small Pricing Box">
<pre class="prettyprint linenums">
&lt;div class="span3"&gt;
 &lt;div class="widget-box transparent"&gt;
    &lt;div class="widget-header"&gt;
       &lt;h5 class="bigger lighter"&gt;Package Name&lt;/h5&gt;
    &lt;/div&gt;
    &lt;div class="widget-body"&gt;
      &lt;div class="widget-main no-padding"&gt;
        &lt;ul class="unstyled <b class="bigger-125">list-striped pricing-table-header</b>"&gt;
           &lt;li&gt;Disk Space &lt;/li&gt;
           .
           .
           .
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;


&lt;div class="span2 <b class="bigger-125">pricing-span</b>"&gt;
 &lt;div class="widget-box <b class="bigger-125">pricing-box-small</b>"&gt;
 &lt;/div&gt;
&lt;/div&gt;
</pre>
		 </div>
		 
		 <br />
		 
		 <h2>Invoice</h2>
		 <p>
			Invoice page also basically consistes of a <code>.widget-box</code>.
			<br />
			The following classes are used:
			<code>.invoice-box</code>  <code>.invoice-info</code> <code>.invoice-info-label</code>
			<br />
			Checkout the html page for more details.
		 </p>
		 
		 <br />
		 
		 <h2>Login & Register</h2>
		 <p>
			It also is based on <code>.widget-box</code> and you can see the page to see how it works.
		 </p>
	
        </section>


		<div class="hr hr-double hr32"></div>
		

        <!-- Buttons
        ================================================== -->
        <section id="forms">
          <div class="page-header">
            <h1><i class="icon-edit green"></i> Form Elements</h1>
          </div>

          <h2>CSS3 Checkbox and Radio</h2>
		  <p>
			Ace comes with Pure CSS3 styled checkbox without any javascript. Switches are also animated on supported browsers such as Firefox and Latest Chrome.
			It also fall back to default browser style on IE8.
		  </p>
		  <p>
			Samples for checkboxes and radio:
		 <div class="bs-docs-example" data-text="Checkbox Sample">
<pre class="prettyprint linenums">
&lt;input type="checkbox" id="checkbox1" /&gt; &lt;label class="lbl" for="checkbox1"&gt; check me&lt;/label&gt;

&lt;label&gt; &lt;input type="checkbox" /&gt; &lt;span class="lbl"&gt; check me&lt;/span&gt; &lt;/label&gt;
</pre>
<input type="checkbox" id="checkbox1" /> <label class="lbl" for="checkbox1"> check me</label>
<br />
Note that you must include an element with <code>.lbl</code> class right after the checkbox or radio. It may or may not contain text.
<br />
Checkboxes have a second style which you should add <code>.ace-checkbox-2</code> class to the input element.
		 </div>
		 
		  <div class="bs-docs-example" data-text="Switch Sample">
<pre class="prettyprint linenums">
&lt;input type="checkbox" id="swith1" class="ace-switch" /&gt; &lt;label class="lbl" for="swith1"&gt;&lt;/label&gt;

&lt;label&gt; &lt;input type="checkbox" class="ace-switch ace-switch-7" /&gt; &lt;span class="lbl"&gt; check me&lt;/span&gt; &lt;/label&gt;
</pre>
<input type="checkbox" class="ace-switch ace-switch-6" /> <label class="lbl">&nbsp;<code>.ace-switch.ace-switch-6</code></label>
<br />
Currently switches come in 7 styles: <code>.ace-switch</code> , <code>.ace-switch.ace-switch-2</code>, ... <code>.ace-switch-.ace-switch-7</code>
		 </div>
		 
		  </p>
		  
		  <br />
		  
		  <h2>Custom File Inputs</h2>
		  <p>File inputs come in 2 different formats, small and large with drag & drop ability</p>
		  
		   <div class="bs-docs-example" data-text="File Input Example">
			<pre class="prettyprint linenums">
&lt;input type="file" id="file-input-1" /&gt;
&lt;script&gt;
$('#file-input-1').ace_file_input({
   no_file:'No File ...',
   btn_choose:'Choose',
   btn_change:'Change'
}).on('change', function(){
	var files = $(this).data('ace_input_files');
	//upload files, etc ...
};
&lt;/script&gt;

&lt;input type="file" multiple /&gt;
&lt;script&gt;
$('input[type=file][multiple]').ace_file_input({
   style:'well',<span class="green">/** for making it like the larger file input in the example */</span>
   btn_choose:'Drop files here or click to choose',
   btn_change:null,
   no_icon:'icon-cloud-upload',
   droppable:true,
   thumbnail:'large',
   /** before_change:function(files, dropped) {
      return false;//to cancel
      return true or a modified file array
   },
   before_remove:function() {
      //called right after clicking the red remove button
      return false;//to cancel reseting the input
   }
   */
});
&lt;/script&gt;
</pre>
						
			<p>
			After the files have been selected, jQuery data fields <i class="brown">ace_input_files</i> and <i class="brown">ace_input_method</i> are set for the the file input element.
			</p>
			<p>
			You can retrieve them like this:
			<br />
			<pre class="prettyprint linenums">
var files = $('file input element').data('ace_input_files');// which is an Array or FileList containing the selected files.
var method = $('file input element').data('ace_input_method');// which is either "drop" or "select" depending on how the user selected files.
			</pre>
			</p>
			
			<p>
			But before this data is set, <i class="brown">before_change</i> function is called if it is defined.
			<br />
			It has two arguments, a <i class="green">FileList</i> and a <i class="green">boolean</i> which tells us whether files have been selected or dropped.
			<br />	<br />
			You can check the file list and remove some if not desired before being saved to field data.
			<br />
			If you return false nothing will be saved/changed, if you return true all files will be saved and if you return
			a (modified) file array it will be saved instead.
			</p>
			<div class="well well-small">
				<span class="label label-important arrowed-right">Hint</span> For an example see the form elements page.
			</div>
			
			<hr />
			<p>			
			However please note that <i class="brown">ace_input_files</i> is only useful for javascript handling and uploading of files.
			<br />
			The file input field's value cannot be changed to reflect your changes because of the browser's security measures. (it can only be reset)
			<br />
			If you submit the form like traditional forms and files are sent as usual, all files are sent to server for further processing.
			</p>
			
			<p>
			Currently the "Ace File Input" element may be good in most situtations but more flexibility and features will be
			added in next updates.
			</p>
		
			<br />
			
			<h2>Custom Color Picker</h2>

<pre class="prettyprint linenums">
&lt;select id="colorpicker" class="hidden"&gt;
  &lt;option data-skin="skin-1" value="#AC725E"&gt;#AC725E&lt;/option&gt;
  &lt;option data-skin="skin-2" value="#D06B64"&gt;#D06B64&lt;/option&gt;
  .
  .
  .
&lt;/select&gt;
</pre>
<pre class="prettyprint linenums">
$('#colorpicker').ace_colorpicker({pull_right:false|true})
.on('change', function(){
   /**
    $(this).val();
    $(this).data('skin');
    etc ...
   */
});
</pre>
			
						<br />
			
			<h2>FuelUX Spinner</h2>
			FuelUX Spinner is used with a little extra wrapping for easier use and customiztion.
			<div class="bs-docs-example" data-text="Spinner Example">
<pre class="prettyprint linenums">
&lt;input type="text" id="spinner" /&gt;
</pre>

<pre class="prettyprint linenums">
$('text field element').ace_spinner({
  //FUEL_UX SPINNER options
  // + custom ones
  icon_up:'icon-plus',//default : 'icon-chevron-up'
  icon_down:'icon-minus',// default : 'icon-chevron-down'
  btn_up_class:'btn-success',//default : ''
  btn_down_class:'btn-danger'//default : ''
}).on('change', function(){
	//alert($(this).val());
});
</pre>
			</div>
			
						<br />
			
			<h2>FuelUX Wizard</h2>
			FuelUX Wizard is used with a little extra wrapping for easier use and customiztion.
			<div class="bs-docs-example" data-text="Wizard Example">
<pre class="prettyprint linenums">
&lt;div id="fuelux-wizard" class="row-fluid hidden"&gt;
  &lt;ul class="wizard-steps"&gt;
    &lt;li data-target="#step1" class="active"&gt;&lt;span class="step"&gt;1&lt;/span&gt; &lt;span class="title"&gt;Step # 1&lt;/span&gt;&lt;/li&gt;
    &lt;li data-target="#step2"&gt;&lt;span class="step"&gt;2&lt;/span&gt; &lt;span class="title"&gt;Step # 2&lt;/span&gt;&lt;/li&gt;
    .
    .
    .
  &lt;/ul&gt;
&lt;/div&gt;&lt;!--/.row-fluid--&gt;

&lt;div class="step-content row-fluid position-relative"&gt;
  &lt;div class="step-pane active" id="step1"&gt;
    &lt;form id="form-1"&gt;
    &lt/form&gt;
  &lt;/div&gt;&lt;!--#step1--&gt;
  
  &lt;div class="step-pane active" id="step2"&gt;
  &lt;/div&gt;&lt;!--#step2--&gt;
    .
    .
    .
&lt;/div&gt;&lt;!--/.step-content--&gt;

&lt;div class="row-fluid wizard-actions"&gt;
  &lt;button class="btn btn-prev"&gt;&lt;i class="icon-arrow-left"&gt;&lt;/i&gt; Prev&lt;/button&gt;
  &lt;button class="btn btn-success btn-next" data-last="Finish "&gt;Next &lt;i class="icon-arrow-right icon-on-right"&gt;&lt;/i&gt;&lt;/button&gt;
&lt;/div&gt;&lt;!--/.wizard-actions--&gt;
</pre>


<pre class="prettyprint linenums">
$('#fuelux-wizard').ace_wizard().on('change', function(e, info){
	if(info.step == 1 && !$('#form-1').valid()) return false;
}).on('finished', function(){
	alert('Success!');
});
</pre>
			</div>

        </section>


		 <div class="hr hr-double hr32"></div>
		

        <!-- Images
        ================================================== -->
        <section id="plugins">
          <div class="page-header">
            <h1><i class="icon-paper-clip"></i> Plugins</h1>
          </div>
		  
		  The following frameworks and plugins have been used to power different parts of Ace admin template.
		  <br />
		  You can find documentation and examples for each one on their respective pages or you may want to check out Ace html files for examples.
		  <br />
		  
		  
		  <ul class="unstyled spaced">
			<li><i class="icon-angle-right"></i> jQuery 1.9.1 <a href="http://www.jquery.com/" target="_blank"><i class="icon-external-link"></i></a> </li>
			<li><i class="icon-angle-right"></i> jQuery UI 1.10.2 (Custom Build) <a href="http://www.jqueryui.com/" target="_blank"><i class="icon-external-link"></i></a></li>
			<li><i class="icon-angle-right"></i> Twitter Bootstrap 2.3.1 <a href="http://twitter.github.io/bootstrap/" target="_blank"><i class="icon-external-link"></i></a></li>
			<li><i class="icon-angle-right"></i> FontAwesome 3.0 <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank"><i class="icon-external-link"></i></a></li>
			<li><i class="icon-angle-right"></i> Google Fonts "Open Sans" <a href="http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans" target="_blank"><i class="icon-external-link"></i></a></li>
			
			<li class="divider"></li>
			
			<li><i class="icon-angle-right"></i> jQuery Flot Charts 0.8 <a href="http://www.flotcharts.org/" target="_blank"><i class="icon-external-link"></i></a></li>
			<li><i class="icon-angle-right"></i> jQuery Sparklines 2.1.1 <a href="http://omnipotent.net/jquery.sparkline/" target="_blank"><i class="icon-external-link"></i></a></li>
			<li><i class="icon-angle-right"></i> Easy Pie Chart 1.0.1 <a href="http://rendro.github.io/easy-pie-chart/" target="_blank"><i class="icon-external-link"></i></a></li>
			<li><i class="icon-angle-right"></i> jQuery Knob 1.2.0 <a href="http://anthonyterrien.com/knob/" target="_blank"><i class="icon-external-link"></i></a></li>

			<li class="divider"></li>

			<li><i class="icon-angle-right"></i> jQuery Validate 1.11.1 <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" target="_blank"><i class="icon-external-link"></i></a></li>
			<li><i class="icon-angle-right"></i> FuelUX 2.3.0 (Spinner & Wizard) <a href="http://exacttarget.github.io/fuelux/" target="_blank"><i class="icon-external-link"></i></a></li>

			<li class="divider"></li>
			
			<li><i class="icon-angle-right"></i> FullCalendar 1.6.1 <a href="http://arshaw.com/fullcalendar/" target="_blank"><i class="icon-external-link"></i></a></li>
			<li><i class="icon-angle-right"></i> jQuery ColorBox 1.4.14 <a href="http://www.jacklmoore.com/colorbox/" target="_blank"><i class="icon-external-link"></i></a></li>
			<li><i class="icon-angle-right"></i> jQuery dataTables 1.9.4 <a href="http://digitalbush.com/projects/masked-input-plugin/" target="_blank"><i class="icon-external-link"></i></a></li>
			
			<li class="divider"></li>
			
			<li><i class="icon-angle-right"></i> jQuery Chosen 0.9.12 <a href="http://harvesthq.github.io/chosen/" target="_blank"><i class="icon-external-link"></i></a></li>
			<li><i class="icon-angle-right"></i> jQuery Masked Input 1.3.1 <a href="http://digitalbush.com/projects/masked-input-plugin/" target="_blank"><i class="icon-external-link"></i></a></li>
			<li><i class="icon-angle-right"></i> jQuery Input Limiter 1.3.1 <a href="http://rustyjeans.com/jquery-plugins/input-limiter" target="_blank"><i class="icon-external-link"></i></a></li>
			<li><i class="icon-angle-right"></i> jQuery AutoSize 1.16.7 <a href="http://www.jacklmoore.com/autosize/" target="_blank"><i class="icon-external-link"></i></a></li>

			<li class="divider"></li>
			
			<li><i class="icon-angle-right"></i> Bootstrap Colorpicker <a href="http://www.eyecon.ro/bootstrap-colorpicker" target="_blank"><i class="icon-external-link"></i></a></li>
			<li><i class="icon-angle-right"></i> Bootstrap Datepicker <a href="http://eternicode.github.io/bootstrap-datepicker/" target="_blank"><i class="icon-external-link"></i></a></li>
			<li><i class="icon-angle-right"></i> Bootstrap Timepicker v0.2.3 <a href="http://jdewit.github.io/bootstrap-timepicker/" target="_blank"><i class="icon-external-link"></i></a></li>
			<li><i class="icon-angle-right"></i> Bootstrap DateRange Picker 1.1 <a href="https://github.com/dangrossman/bootstrap-daterangepicker" target="_blank"><i class="icon-external-link"></i></a></li>

			<li class="divider"></li>
			
			<li><i class="icon-angle-right"></i> Bootbox.js 3.2.0 <a href="http://bootboxjs.com" target="_blank"><i class="icon-external-link"></i></a></li>
			<li><i class="icon-angle-right"></i> jQuery Gritter 1.7.4 <a href="http://boedesign.com/2009/07/11/growl-for-jquery-gritter/" target="_blank"><i class="icon-external-link"></i></a></li>
			<li><i class="icon-angle-right"></i> jQuery slimScroll 1.1.1 <a href="http://rocha.la/jQuery-slimScroll" target="_blank"><i class="icon-external-link"></i></a></li>
			<li><i class="icon-angle-right"></i> Spin.js 1.3.0 <a href="http://fgnass.github.io/spin.js/" target="_blank"><i class="icon-external-link"></i></a></li>
			
			<li class="divider"></li>
			
			<li><i class="icon-angle-right"></i> jQuery UI Touch Punch 0.2.2 <a href="http://touchpunch.furf.com/" target="_blank"><i class="icon-external-link"></i></a></li>
			<li><i class="icon-angle-right"></i> Google Code Prettify <a href="http://code.google.com/p/google-code-prettify/" target="_blank"><i class="icon-external-link"></i></a></li>
			<li><i class="icon-angle-right"></i> ExplorerCanvas <a href="http://code.google.com/p/explorercanvas/" target="_blank"><i class="icon-external-link"></i></a></li>
		  </ul>



        </section>



      </div>
    </div>

  </div>



    <!-- Footer
    ================================================== -->
    <footer class="footer">
      <div class="container">
        <p class="bigger-150 dark"><span class="blue bigger-125">Ace</span> Admin Template &copy;2013</p>
      </div>
    </footer>



    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery-1.9.1.min.js"></script>
	<script src="../assets/js/bootstrap.min.js"></script>
    <script src="../assets/js/prettify.js"></script>


	<script>
	$(function() {
		var $window = $(window)
		setTimeout(function () {
		  $('.bs-docs-sidenav').affix({
			offset: {
			  top: function () { return $window.width() <= 980 ? 290 : 210 }
			, bottom: 270
			}
		  })
		}, 100)

		// make code pretty
		window.prettyPrint && prettyPrint()
	});
	</script>


  </body>
</html>
